import { addComment } from '@/store/actions/articleDetail'
import { NavBar, TextArea } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import styles from './index.module.scss'
type Props = {
  hideComment: () => void,
  artId: string
}
export default function CommentInput ({ hideComment, artId }: Props) {
  const dispatch = useDispatch()
  const [value, setVaule] = useState('')
  const click = async () => {
    if (!value) {
      return
    }
    await dispatch(addComment(artId, value))
    hideComment()
  }
  return (
    <div className={styles.root}>
      <NavBar
        right={
          <span className="publish" onClick={click}>
            发表
          </span>
        }
        onBack={hideComment}
      ></NavBar>
      <div className="input-area">
        {/* 回复别人的评论时显示：@某某 */}

        {/* 评论内容输入框 */}
        <TextArea
          value={value}
          onChange={(val) => setVaule(val)}
          placeholder="说点什么~"
          rows={10}
        />
      </div>
    </div>
  )
}
